import React, { Component } from 'react'

import HeaderAd from '@/top-ad/HeaderAd'

import {connect} from 'react-redux'

import { Carousel, WingBlank } from 'antd-mobile'

import Title from './Title'

import { changeTopVal } from '../actionCreator'

import {
    Header,
    ChangeBorder
} from './styled'

import './style.css'

import { NavLink , withRouter } from 'react-router-dom'


@connect(
    state => ({
        // topVal: state.home.topVal
        topVal: state.getIn(['home' , 'topVal'])
    }),
    dispatch => {
        return {
            changeTopVal (val) {
                dispatch(changeTopVal(val))
            }
        }
    }
)
@withRouter
class Wrap extends Component {

    state = {
        isShowNav : false,
        imgHeight: 128,
        stick: false,
        data: ['http://pic1.ymatou.com/G03/M00/7F/3F/CgzUIV7aK9-AW9aaAAOKXVjbcX4378_375_128_o.png','http://pic1.ymatou.com/G03/M09/3A/57/CgzUIV8P8cKAXAM_AAV9VRYjCEE729_375_128_o.png'],
    }

    async  componentDidMount () {
        // todo
        const map = document.querySelector('header').offsetTop
        this.props.changeTopVal(map)
        // 吸顶效果
        const root = document.getElementById('root')
        root.addEventListener('scroll' , () => {
            const _Top = root.scrollTop
            if (_Top > this.props.topVal && !this.state.stick || _Top < this.props.topVal && this.state.stick) {
                this.setState({
                    stick: !this.state.stick
                })
            }
            
        })
    }
    // 取消setState的使用
    componentWillUnmount () {
        this.setState = () => false
    }

    render() {
        return (
            <>
                {/* 顶部广告 */}
                <HeaderAd></HeaderAd>
                {/* 头部 */}
                <Header className={this.state.stick ? 'stick' : ''}>
                    <div className="logo">
                        {
                            this.props.history.location.pathname === '/' ? (
                                <img src="" alt=""/>
                            ) : (
                                <div className="nav">
                                    <NavLink to='/home'>
                                        <ChangeBorder 
                                            color={this.props.location.pathname === '/home' ? '#cc3333' : '#fff'}
                                            width='0 0 3px 0'
                                        >首页</ChangeBorder>
                                    </NavLink>
                                    <NavLink to='/community'>
                                        <ChangeBorder 
                                            color={this.props.location.pathname === '/community' ? '#cc3333' : '#fff'}
                                            width='0 0 3px 0'
                                        >社区</ChangeBorder>
                                    </NavLink>
                                </div>
                            )
                        }
                    </div>
                    <div className="menu">
                        <NavLink to='/shopcar'>
                            <span>
                                <img src="" alt=""/>
                            </span>
                        </NavLink>
                        <NavLink to='/home'>
                                {
                                    this.props.history.location.pathname === '/' && (
                                    <span>
                                        <img src="" alt=""/>
                                    </span>
                                    )
                                }
                            </NavLink>
                        <NavLink to='/mine'>
                        <span>
                            <img src="" alt=""/>
                        </span>
                    </NavLink>
                    </div>
                </Header>
                {/* 吸顶站位元素 */}
                <div className={this.state.stick ? 'show' : 'hidden'}></div>
                {/* 轮播 */}
                <div className="swiper">
                    <WingBlank>
                        <Carousel
                            autoplay={true}
                            infinite
                            autoplayInterval={2000}
                        >
                        {this.state.data.map(val => (
                            <a
                                key={val}
                                href="#"
                                style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                            >
                                <img
                                    src={val}
                                    alt=""
                                    style={{ width: '100%', verticalAlign: 'top' }}
                                    onLoad={() => {
                                        window.dispatchEvent(new Event('resize'));
                                        this.setState({ imgHeight: 'auto' });
                                    }}
                                />
                            </a>
                        ))}
                        </Carousel>
                    </WingBlank>
                </div>
                {/* 展示 */}
                <div className="limit-time">
                    <Title></Title>
                </div>
            </>
        )
    }
}

export default Wrap
